<template>
  <div class="main">
    <div class="btnsubmit">
      <el-button
        type="primary"
        class="create"
        @click.native.prevent="submitData"
      >确定</el-button>
      <el-button
        type="primary"
        class="cancel"
        @click="comeBack"
      >取消</el-button>
    </div>
    <div class="left">
      <el-tree
        ref="tree"
        :data="treeListData"
        show-checkbox
        highlight-current
        node-key="id"
        :default-expanded-keys="[1]"
        :props="defaultProps"
        @check="handleClick"
      />
    </div>
  </div>
</template>

<script>
import { getRoleLinktree, getRoleLinkIdList, getRoleLinkAdd } from '@/api/role'

export default {
  name: 'RoleLink',
  components: {},
  data() {
    return {
      treeListData: [],
      linklist: [],
      idList: [],
      defaultProps: {
        label: 'authName',
        children: 'children'
      }
    }
  },
  computed: {},
  watch: {

  },
  created() {
    this.treeList()
  },
  beforeMount() {
    this.getLinkList()
  },
  mounted() {

  },
  methods: {
    async treeList() {
      const res = await getRoleLinktree()
      if (res.code === 200) {
        this.treeListData = res.data || []
      }
    },
    // 角色关联的权限列表
    async getLinkList() {
      const id = this.$route.query.id
      const res = await getRoleLinkIdList(id)
      if (res.code === 200) {
        this.linklist = res.data || []
        // 获取当前权限已有权限处理
        for (let i = 0; i < this.linklist.length; i++) {
          this.idList.push(this.linklist[i].id)
        }
        console.log(this.idList)
        this.$refs.tree.setCheckedKeys(this.idList)
      }
    },
    handleClick(data) {
      this.idList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
    },
    async submitData() {
      const id = this.$route.query.id
      this.idList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      const res = await getRoleLinkAdd(id, this.idList)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '权限添加成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
        this.$router.push('roleUser')
      }
    },
    comeBack() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../styles/variables';
.main{
  margin: 24px 20px 0 20px;
  padding-top: 1px;
  .left{
    width: 100%;
    float: left;
    background: rgba(37,38,47,1);
    padding: 0 12px 0 12px;
    max-height: 536px;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .right{
        margin: 0 0 0 210px;
  }
}
.btnsubmit{
        // text-align: center;
        // margin-top: 60px;
        margin: 8px 0 37px 28px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
</style>

